<template>
	<view>
		<template v-if="!islogin">
			<!-- 未登录 -->
			<view class="u-f-ajc">登陆仿糗百，体验更多功能</view>
			<!-- 第三方登陆 -->
			<view class="other-login u-f-ac">
				<view class="u-f-ajc u-f1">
					<view class="icon iconfont icon-jia u-f-ajc"></view>
				</view>
				<view class="u-f-ajc u-f1">
					<view class="icon iconfont icon-jia u-f-ajc"></view>
				</view>
				<view class="u-f-ajc u-f1">
					<view class="icon iconfont icon-jia u-f-ajc"></view>
				</view>
			</view>
			<!-- 账号密码登陆 -->
			<view class="u-f-ajc ">账号密码登陆 <view class="icon iconfont icon-jinru"></view>
			</view>
		</template>

		<!-- 登陆 -->
		<template v-else >
			<view class="home-info u-f-ac">
				<image :src="homeinfo.userpic" mode="widthFix" lazy-load></image>
				<view class="u-f1">
					<view>{{homeinfo.username}}</view>
					<view>总访客 {{homeinfo.totalnum}} 今日 {{homeinfo.todaynum}}</view>
				</view>
				<view class="icon iconfont icon-jia"></view>
			</view>
		</template>
		<!-- 数据 -->
		<view class="home-data u-f-ac">
			<block v-for="(item,index) in homedata" :key="index">
				<view class="u-f1 u-f-ajc u-f-column">
					<view>{{item.num}}</view>{{item.name}}
				</view>
			</block>
		</view>
		<!-- 广告位 -->
		<view class="home-adv u-f-ajc">
			<image src="../../static/srcc/c2.jpg" mode="widthFix" lazy-load></image>
		</view>
		<!-- 功能列表 -->
		<view class="home-list">
			<block v-for="(item,index) in list" :key="index">
				<view class="home-list-item u-f-ac u-f-jsb" hover-class="home-list-hover">

					<view class="u-f-ac">
						<view class="icon iconfont icon-liulan"></view>{{item.name}}
					</view>



					<view class="icon iconfont icon-jinru"></view>

				</view>
			</block>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				islogin: true,


				list: [{
						icon: "liulan",
						name: "浏览历史"
					},
					{
						icon: "huiyuanvip",
						name: "认证信息"
					},
					{
						icon: "keyboard",
						name: "信息查询"
					},
				],
				homedata: [{
						name: "动态",
						num: 5
					},
					{
						name: "信息",
						num: 6
					},
					{
						name: "评论",
						num: 7
					},
					{
						name: "收藏",
						num: 8
					},
				],

				homeinfo: {
					userpic: "../../static/srcc/touxiang.jpg",
					username: "Vincent",
					totalnum: 666,
					todaynum: 50,
				}
			}
		},
		methods: {

		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				console.log("跳转设置页")
			}
		}
	}
</script>

<style>
	.home-info {
		padding: 20upx 40upx;
	}

	.home-info>image {
		flex-shrink: 0;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		margin-right: 15upx;
	}

	.home-info>view:first-of-type>view:first-child {
		font-size: 32upx;
	}

	.home-info>view:first-of-type>view:last-child {
		color: #BBBBBB;
	}

	.home-info>view:last-of-type {
		height: 100%;
	}

	.home-list {
		padding: 20upx;
	}

	.home-list-item {
		padding: 20upx;
		border-top: 1upx solid #EEEEEE;
		border-bottom: 1upx solid #EEEEEE;
	}

	.home-list-item>view:first-child {
		color: #333333;
	}

	.home-list-item>view:first-child>view {
		margin-right: 10upx;
	}

	.home-list-item>view:last-child {
		color: #CCCCCC;
	}

	.home-list-hover {
		background: #f4f4f4;
	}

	.other-login {
		padding: 20upx 80upx;
	}

	.other-login>view>view {
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		font-size: 55upx;
		color: #FFFFFF;
	}

	.other-login .icon-jia {
		background: #2CAEFC;
		
	}

	.other-login .icon-weixin {
		background: #2BD19B;
	}

	.other-login .icon-xinlangweibo {
		background: #FC7729;
	}

	.home-data {
		padding: 20upx 40upx;
	}

	.home-data>view {
		color: #989898;
	}

	.home-data>view>view {
		font-size: 32upx;
		color: #333333;
	}

	.home-adv {
		padding: 20upx;
	}

	.home-adv>image {
		border-radius: 20upx;
		height: 150upx;
	}
</style>
